import React from 'react'
import { 
	Button, Modal, Form, Input,Select, Radio,
	Row,Col
} from 'antd'

const EditMerchantDifinitionForm=Form.create({
	name:"edit_merchant_difinition"
})(
	class extends React.Component{   //形象地称为"匿名组件"
		render(){
			const formItemLayout = {
				labelCol: { span: 4 },
			  	wrapperCol: { span: 8 },
			};


			//被Form.create()包装过的组件自动具有props.form属性，完整form对象的api ant design建议参考http://react-component.github.io/form/
			const { visible, onCancel, onCreate, form:{getFieldDecorator},merchantDefinition } = this.props;
      		//onst { getFieldDecorator } = form;
      		{/*onOk={onCreate}*/}
      		return (
      			<Modal
      				visible={visible}
      				title="编辑商圈定义"
      				width="1000px"
      				okText="save"      				
      				onOk={this.handleOk.bind(this)}
      				cancelText="cancel"
      				onCancel={onCancel}>	
      				<Form>
      					<Row>
	      					<Col span={12}>
	      						<Form.Item label="商圈名称" {...formItemLayout}>
	      							{
	      								getFieldDecorator("merchantName",{
	      									initialValue:merchantDefinition.merchantName
	      								})(
	      									<Input placeholder="请输入商圈名称" />
	      								)
	      							}
	      						</Form.Item>
	      					</Col>
	      					<Col span={12}>
	      						<Form.Item label="商圈类型" {...formItemLayout}>
	      							{
	      								getFieldDecorator("geoType",{
	      									initialValue:merchantDefinition.geoType
	      								})(
	      									<Input placeholder="请输入商圈类型" />
	      								)
	      							}
	      						</Form.Item>
	      					</Col>
	      					<Col span={12}>
	      						<Form.Item label="商圈面积" {...formItemLayout}>
	      							{
	      								getFieldDecorator("area",{
	      									initialValue:merchantDefinition.area
	      								})(
	      									<Input placeholder="商圈面积" />
	      								)
	      							}
	      						</Form.Item>
	      					</Col>
	      					<Col span={12}>
	      						<Form.Item label="商圈边界" {...formItemLayout}>
	      							{
	      								getFieldDecorator("bounds",{
	      									initialValue:merchantDefinition.bounds
	      								})(
	      									<Input placeholder="请输入商圈边界" />
	      								)
	      							}
	      						</Form.Item>
	      					</Col>
	      					<Col span={12}>
	      						<Form.Item label="商圈等级" {...formItemLayout}>
	      							{
	      								getFieldDecorator("level",{
	      									initialValue:merchantDefinition._level
	      								})(
	      									<Select placeholder="全选择商圈等级">
							              		<Select.Option value="A"> A </Select.Option>
							              		<Select.Option value="B"> B </Select.Option>
							              		<Select.Option value="C"> C </Select.Option>
							              		<Select.Option value="D"> D </Select.Option>
							              		<Select.Option value="E"> E </Select.Option>
							            	</Select>,
	      								)
	      							}
	      						</Form.Item>
	      					</Col>
	      					<Col span={24}>
	      						<Form.Item label="商圈描述" labelCol={{span:2}} wrapperCol={{span:22}}>
	      							{
	      								getFieldDecorator("description",{
	      									initialValue:merchantDefinition.description
	      								})(
	      									<Input.TextArea placeholder="请输入说明" autoSize={{ minRows:4, maxRows: 4 }} maxLength="200" />
	      								)
	      							}
	      						</Form.Item>
	      					</Col>
	      				</Row>
      				</Form>
      				
      			</Modal>
      		)
		}
		handleOk(evt){
			//console.log(evt.target);   //bind方法event作为最后一个参数注入

			this.props.form.validateFields((err, values) => {
		    	if (err) {
		    		console.log("表单发生错误");
	            }else{
	            	this.props.onCreate(values);
	            }            
	        });
		}
	}
);

export default EditMerchantDifinitionForm

